<template>
    <div class="sjbox">
        <div ref="main" style="width: 1040px; height: 300px;"></div>
    </div>
</template>

<script lang='ts' setup>
import * as echarts from 'echarts'
import { ref, onMounted, watchEffect } from 'vue'
import api from '@/api'
import { storeToRefs } from 'pinia'
import useNumStore from "@/store/mmm/useNumStore"
const store = useNumStore()
const { mounthStore } = storeToRefs(store)

console.log("mounthStore", mounthStore.value);

// let mounths = ref<any>(12)
// mounths.value = mounthStore
//创建月份数组
const monthsList = ref<Array<string>>([])
//创建居民数量数组
const peopleData = ref<Array<string>>([])
//创建签约数据数组
const contractData = ref<Array<string>>([])
//创建服务数据数组
const serviceData = ref<Array<string>>([])

//获取echarts图表数据
const getPeopleContractData = async () => {
    const result = await api.Mdatastatistics.getPeopleContractApi({ months: mounthStore.value })
    console.log("////", result);
    monthsList.value = []
    peopleData.value = []
    contractData.value = []
    serviceData.value = []
    result.data.data.resident.forEach((item: any) => {
        monthsList.value.push(item[0])
        peopleData.value.push(item[1])
    });

    result.data.data.service.forEach((item: any) => {
        contractData.value.push(item[1])
    });

    result.data.data.sign.forEach((item: any) => {
        serviceData.value.push(item[1])
    });
    initBarEcharts();
}
// console.log(serviceData.value);




const main = ref<HTMLElement>();
const myChart = ref<any>();
function initBarEcharts() {
    myChart.value = echarts.init(main.value!);
    myChart.value.setOption({
        title: {
            text: '数据概况'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['居民数量', '签约量', '服务量']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {

            feature: {
                saveAsImage: {}
            },
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [...monthsList.value]
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '居民数量',
                type: 'line',
                data: [...peopleData.value],
            },
            {
                name: '签约量',
                type: 'line',
                data: [...contractData.value]
            },
            {
                name: '服务量',
                type: 'line',
                data: [...serviceData.value]
            }
        ]
    })
}

onMounted(() => {
    getPeopleContractData()
    initBarEcharts();
})
//watchEffect钩子函数来监听monthsList.value的变化。当monthsList.value发生变化时，会重新设置图表的选项，更新x轴的数据
watchEffect(() => {
    mounthStore.value
    console.log("watchEffect执行了");
    getPeopleContractData()
});
</script>

<style lang='scss' scoped>
.sjbox {
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 20px;
    margin: 20px 0;
}
</style>